

import { useEffect, useRef, useState } from "react"
import { Col, Row, Button, Input, Checkbox, Table, Tag, Pagination, Tooltip, Skeleton, message } from 'antd';
import { AudioOutlined } from '@ant-design/icons';
import { useNavigate } from "react-router-dom";
import { GetAdmins, DeleteAdmin, banAdmin, GetActions } from "../../api/admin";
/**
 * 
 * @returns 管理员操作页面
 */
const AdminAction = () => {
    document.info = [
        {
            title: "管理员-行为日志",
            url: "/admin/action",
        },
        {
            title: "管理员",
            url: "/admin",
        }
    ]
    // 搜索框属性 start
    const { Search } = Input;
    const suffix = (
        <AudioOutlined
            style={{
                fontSize: 16,
                color: '#1677ff',
            }}
        />
    );

    /**
 * 分页数据
 */
    const [pages, setPage] = useState({
        page: 1,
        limit: 10,
        key: "",
        total: 0,
    });


    const navigate = useNavigate();

    //获取搜索框dom
    const myRef = useRef("");

    const onSearch = (value, _e, info) => {
        console.log(111111);
        setPage((pages) => ({ ...pages, key: value }));
    }

    //搜索框改变事件
    const onSearchData = () => {
        // setLike((likeSelect) => ({ ...likeSelect, key: myRef.current.input.value }));

        if (myRef.current.input.value == "" || myRef.current.input.value == null) {
            setPage((pages) => ({ ...pages, key: "" }));
        }
    }
    //搜索框属性 end



    /**
 * 表格数据
 */
    const [tableData, setData] = useState([]);
    //加载效果
    const [load, setLoad] = useState({
        loading: false,
        isFirst: true
    });

    //禁用/启用
    const isBan = async (id) => {
        setLoad((load) => ({ ...load, loading: true }));
        const res = await banAdmin({ id: id });
        if (res?.result === 0) {
            message.success(res?.message)
            getData();
        } else {
            message.error(res?.message);
            setLoad((load) => ({ ...load, loading: false }));
        }
    }








    const getData = async () => {
        setLoad((load) => ({ ...load, loading: true }));
        const data = await GetActions({ page: pages.page, limit: pages.limit, key: pages.key });


        if (data.result === 0) {
            data.data.data.map((d, i) => { return d.Index = i + 1 });
            setData(data.data);

            setPage((pages) => ({ ...pages, total: data.data.total }));
            setLoad((load) => ({ ...load, loading: false, isFirst: false }));
        }
    }
    useEffect(() => {
        getData();
    }, [pages.page, pages.limit, pages.key]);


    //删除管理员
    const deleteAdmin = async (props) => {
        setLoad((load) => ({ ...load, loading: true }));
        const res = await DeleteAdmin({ id: props });
        if (res?.result === 0) {
            message.success(res?.message);
            getData();
        } else {
            setLoad((load) => ({ ...load, loading: false }));
            message.error(res?.message);
        }

    }

    //表格表头
    const columns = [
        {
            title: '序号',
            dataIndex: 'Index',
            key: 'Index',

        },
        {
            title: '行为',
            dataIndex: 'action',
            key: 'action',
            render: (text) => <Tooltip placement="topLeft" title={text}>{text}</Tooltip>,
            onCell: () => {
                return {
                    style: {
                        maxWidth: 200,
                        overflow: 'hidden',
                        whiteSpace: 'nowrap',
                        textOverflow: 'ellipsis',
                        cursor: 'pointer',
                        height: "51px"

                    }
                }
            },
        },
        {
            title: '结果',
            dataIndex: 'result',
            key: 'result',
            width: 140,
            render: (text) => {
                if (text === 0) {
                    return <Tag className="success-tag" color="green" bordered={false}>成功</Tag>
                } else {
                    return <Tag className="danger-tag" color="red" bordered={false}>失败</Tag>
                }
            },
        },
        {
            title: '用户',
            dataIndex: 'user',
            key: 'user',
            render: (text) => <Tooltip placement="topLeft" title={text}>{text}</Tooltip>,
            onCell: () => {
                return {
                    style: {
                        maxWidth: 200,
                        overflow: 'hidden',
                        whiteSpace: 'nowrap',
                        textOverflow: 'ellipsis',
                        cursor: 'pointer',
                        height: "51px"

                    }
                }
            },
        },
        {
            title: '地址',
            dataIndex: 'url',
            key: 'url',
            render: (text) => <Tooltip placement="topLeft" title={text}>{text}</Tooltip>,
            onCell: () => {
                return {
                    style: {
                        maxWidth: 200,
                        overflow: 'hidden',
                        whiteSpace: 'nowrap',
                        textOverflow: 'ellipsis',
                        cursor: 'pointer',
                        height: "51px"

                    }
                }
            },
        },
        {
            title: '参数',
            dataIndex: 'params',
            key: 'params',
            render: (text) => <Tooltip placement="topLeft" title={text}>{text}</Tooltip>,
            onCell: () => {
                return {
                    style: {
                        maxWidth: 200,
                        overflow: 'hidden',
                        whiteSpace: 'nowrap',
                        textOverflow: 'ellipsis',
                        cursor: 'pointer',
                        height: "51px"

                    }
                }
            },
        },
        {
            title: '时间',
            dataIndex: 'time',
            key: 'time',
            render: (text) => <Tooltip placement="topLeft" title={text}>{text}</Tooltip>,
            onCell: () => {
                return {
                    style: {
                        maxWidth: 300,
                        overflow: 'hidden',
                        whiteSpace: 'nowrap',
                        textOverflow: 'ellipsis',
                        cursor: 'pointer',

                    }
                }
            },
        }

    ];



    //分页改变事件
    const pageChange = (props) => {
        setPage((pages) => ({ ...pages, page: props }));
    }

    //去新增
    const goAdd = () => {
        navigate("/admin/add");
    }


    return (
        <div className="Containers">

            <Skeleton active loading={load.isFirst} paragraph={{ rows: 15 }}>

                <div className="goodsIndexContainer">
                    <div className="good-head">
                        <div></div>


                        <div>
                            <Search
                                placeholder="关键字"
                                onSearch={onSearch}
                                onChange={(e) => onSearchData(e)}
                                allowClear
                                ref={myRef}
                                style={{
                                    width: 500,
                                }}
                            />
                        </div>


                        <div></div>
                    </div>



                    <div className="good-data">

                        <Table dataSource={tableData.data} columns={columns} bordered pagination={false} loading={load.loading}
                            style={{ marginTop: "10px" }}
                            scroll={{
                                y: "405px",
                                x: "1200px"
                            }} />

                        <div className="page-layout">
                            <Pagination defaultCurrent={1} total={pages.total} onChange={(value) => { pageChange(value) }} />
                        </div>
                    </div>
                </div>

            </Skeleton>

        </div>
    )
}


export default AdminAction